<template>
	<view class="min100">
		<view class="plr-30">
			<view class="mt-20 flex flex-start">
				<view class="mr-10" style="color: red;">*</view>我的疑问
			</view>
			<view class="ptb-10 inputbox">
				<u-input v-model="value" :type="type" placeholder="不超过10个字" :border="border" />
			</view>
			<view class="ptb-20 flex flex-start">
				<view class="mr-10" style="color: red;">*</view>问题详述
			</view>
			<u-field v-model="remark" :border-bottom="false" label-width="0" placeholder="请输入问题描述" type="textarea"
				class="mb-20">
			</u-field>
			<!-- 图片 -->
			<view class="flex flex-start">
				<view class="mr-10" style="color: red;">*</view>图片说明
			</view>
			<view class="upload-img-box flex flex-start">
				<view class="flex mt-60 flex-between mr-10">
					<view v-for="(item,index) in imgList" :key='index' style="position:relative">
						<image class="pre-img mr-20" mode='aspectFill' :src="item" alt=""></image>
						<image class='delete' src='https://static-c.ehsy.com/m/images/delete.png'
							@click='deleteImg(index)'>
						</image>
					</view>
				</view>
				<view class="mt-60" id='fileUploadBtn' @click="chooseImgs()" v-show="imgList.length < 3">
					<image src="../../static/upImg.png" class='upload_img'></image>
				</view>
			</view>
			<view class="notice ptb-30 plr-10 mt-30 size-26">
				<view class="notice_tit">反馈须知</view>
				<view class="">收到您提交的问题后，我们会尽快给出官方解答，并将结果在辟谣墙上曝光</view>
			</view>
			<u-checkbox-group class="anonymous flex center mtb-30" active-color="#44acff">
				<u-checkbox @change="handlecheck()" v-model="checked" shape="circle">
					<view class="policytext">匿名提交</view>
				</u-checkbox>
			</u-checkbox-group>
			<view class="submitbtn" @click="submitFeed">立即提交</view>
			<!-- <u-button type="primary" class="" style="color: #fff!important;" hover-class="none" @click="submitFeed">立即提交</u-button> -->
		</view>
	</view>
</template>

<script>
	import tab from "../../components/tab.vue"
	import {
		baseUrl
	} from '../../common/http.js'
	export default {
		components: {
			tab
		},
		data() {
			return {
				is_anonymous: '',
				checked: false,
				value: '',
				type: 'text',
				border: false,
				remark: '',
				images: "",
				imgList: []
			}
		},
		methods: {
			handlecheck(checked) {
				this.is_anonymous = this.checked ? 0 : 1
				
				console.log(this.is_anonymous);
			},
			chooseImgs() {
				let _this = this;
				uni.chooseImage({
					count: 3,
					sizeType: ['compressed'],
					sourceType: ['album'], //从相册选择
					success: (res) => {
						uni.showLoading({
							title: '上传中'
						})
						let imgarr = res.tempFilePaths
						console.log(imgarr);

						imgarr.forEach(item => {
							console.log(item);
							uni.uploadFile({
								url: baseUrl + '/api/upload/fileUpload',
								filePath: item,
								name: 'image',
								success: (res) => {
									console.log(res);
									uni.hideLoading()
									let path = JSON.parse(res.data).data.path;
									console.log(path);
									_this.imgList.push(path);
								},
								fail: () => {
									uni.showToast({
										title: '上传失败',
										icon: 'none'
									})
								}
							});
						})
					}
				})
			},
			deleteImg(index) {
				this.imgList.splice(index, 1);
			},
			submitFeed() {
				if (this.remark == '') {
					uni.showToast({
						title: "请填写反馈信息!",
						icon: 'none'
					})
					return;
				}
		 
				this.$http('api/user/feedBack', {
					remark: this.remark,  //内容
					images: this.imgList,  //图片
					is_anonymous:this.is_anonymous,  //是否匿名
					desc: '测试'     //问题详述
				}, "POST").then(res => {
					uni.showToast({
						title: "提交成功!"
					})
					// setTimeout(() => {
					// 	uni.navigateTo({
					// 		url: './contact'
					// 	})
					// }, 500)
				})
			},

		}
	}
</script>

<style lang="less" scoped>
	.submitbtn {
		width: 90%;
		margin: 0 auto;
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 20rpx;
		color: #fff;
		background-color: rgb(192, 192, 192);
	}

	.anonymous {
		display: flex !important;
	}

	.notice {
		width: 100%;
		color: #999;
		background-color: #f6f6f6;

		.notice_tit {
			margin-bottom: 20rpx;
			color: #000;
			font-size: 34rpx;
			font-weight: 600;
		}
	}

	.inputbox {
		border-bottom: 1rpx solid #e6e6e6;
	}

	.pre-img {
		width: 200rpx;
		height: 200rpx;
		display: block;
		position: relative;
	}

	.delete {
		z-index: 5;
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		top: -20rpx;
		right: 0rpx;
	}

	.upload_img {
		width: 200rpx;
		height: 200rpx;
	}

	.u-field {
		background: rgb(246, 246, 246);
		border-radius: 20rpx;
	}
</style>
